<template>
  <div>
    <a-tooltip placement="top" :title="getToolTip(status)" v-if="status === 0">
      <i class="iconfont icon-chenggong"></i>
    </a-tooltip>
    <a-dropdown :trigger="['click']" v-else-if="status === 1 || status === 2" :getPopupContainer="getPopupContainer">
      <a-tooltip placement="top" :title="getToolTip(status)" :getPopupContainer="getPopupContainer">
        <i class="iconfont icon-chenggong" v-if="status === 1 " style="color:#58abce;cursor:pointer"></i>
        <i class="iconfont icon-shibaix" v-else style="color:#ff8762;cursor:pointer"></i>
      </a-tooltip>
      <a-menu slot="overlay" style="width:160px;" @click="clickAction">
        <a-menu-item class="operateItemTitle" :key="-1">{{ $t('setEcu') }}</a-menu-item>
        <a-menu-item :key="2" v-if="status === 1">
          <p>
            <i class="iconfont icon-shibaix" style="color:#ff8762"></i>
            {{ $t('notOptional') }}
          </p>
        </a-menu-item>
        <a-menu-item :key="1" v-if="status === 2">
          <p>
            <i class="iconfont icon-chenggong" style="color:#58abce"></i>
            {{ $t('yesOptional') }}
          </p>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <span v-else>&nbsp;</span>
  </div>
</template>
<script>
export default {
  props: {
    // ECU选装展示：0.标配 1.已选装 2.未选装
    status: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
    }
  },
  methods: {
    getPopupContainer () {
      return document.body
    },
    clickAction ({ key }) {
      if (key === -1) {
        return
      }
      this.$emit('updatestatus', key)
    },
    getToolTip (status) {
      if (status === 0) {
        return this.$t('standardConfigEcu')
      }
      const msg = this.$t('optionalEcu')
      if (status === 1) {
        return msg + '：' + this.$t('yesOptional')
      }
      return msg + '：' + this.$t('notOptional')
    }
  }
}
</script>
<style scoped lang="less">
.operateItemTitle {
    font-weight: bolder;
    background: #f0f2f5;
    cursor:auto;
    &.ant-dropdown-menu-item:hover{
      background-color: #f0f2f5;
    }
  }
</style>
